<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="semantic.min.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <script src="semantic.min.js"></script>
   <script type="text/javascript">  
    function selcity(){  
        var arr = [["--选择城市--"],["海定区","东城区","西城区","朝阳区"],["济南","青岛","日照","威海"],  
                   ["营口","鞍山","沈阳","大连"],["广州","深圳","惠州","东莞"]];  
        var index = document.getElementById("selID").selectedIndex;  
        var subNode = document.getElementById("subID");  
        var citys = arr[index];        
          
        subNode.options.length = 0;   //清空之前选项  
        for(var x=0;x<citys.length;x++){  
            var optNode = document.createElement("option");  
            optNode.innerText = citys[x];  
            subNode.appendChild(optNode);  //选择添加到子选项中  
        }  
    }  
    function shoujihao() {
      var num=document.getElementsByName("phone").value;
      if(num.length<=11){
        alert("不够11位")
      }
      function youxiang() {
        //4.获得eamil输入框的信息，
        var eamil = document.getElementById('eamil').value;
        //验证eamil是否合法，采用正则表达式eamil
        if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eamil)){
            alert("邮箱不正确");
            

        }
      }
    }
</script>  
<style type="text/css">   
      
</style>  
</head>
<body>
  <form class="ui form">
    <div class="field">
      <label>用户名</label>
      <input type="text" name="user" placeholder="用户名">
    </div>
    <div class="field">
      <label>密码</label></label>
      <input type="text" name="password" placeholder="密码">
    </div>
    <div class="field">
      <label>确认密码</label>
      <input type="text" name="againpassword" placeholder="确认密码">
    </div>
    <div class="field">
      <label>邮箱</label>
      <input type="text" name="last-name" placeholder="邮箱" onchange="youxiang">
    </div>
    <div class="field">
      <label>手机号</label>
      <input type="text" name="phone" placeholder="手机号" onchange="shoujihao">
    </div>
     
    <div>
      <select id="selID" onchange="selcity()">  
        <option>--选择省市--</option>  
        <option>北京</option>  
        <option>山东</option>  
        <option>辽宁</option>  
        <option>广东</option>  
    </select>  
      
    <select id="subID">  
        <option>--选择城市--</option>  
    </select>  
    </div>




    </div>
    <button class="ui button" type="submit">提交</button>
  </form>

</body>
</html>